/**
 * 配置开发环境常用的配置: 让代码运行
 *    项目运行指令:         Tips: 这两个指令都被全局安装 npm xxx -g
 *        webpack 会将打包结果输出出去
 *        webpack-dev-server 只会在内存中编译打包, 没有输出
 *
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const commonCssLoader = [
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  },
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        require('postcss-preset-env')()
      ]
    }
  }
]
module.exports = {
  entry: ['./src/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 多个loader, 但是每个文件只能匹配一个loader, 被一个loader处理, 因此可以使用oneOf唯一匹配
        // 不需要每个文件把所有的loader都询问一遍, 可以提高loader的执行效率
        // oneOf 类似于 switch 语句每个case加一个break. 匹配命中了就不会往下继续匹配了
        // 以下loader只会匹配一个
        // Tips: 不能有两个配置处理同一种类型文件. 如eslint + js兼容性处理就涉及了同时处理js文件
        oneOf: [
          // 配置css
          {
            test: /\.(css)$/,
            use: [...commonCssLoader],
          },
          // 配置less
          {
            test: /\.(less)$/,
            use: [...commonCssLoader, 'less-loader'],
          },
          // 配置图片
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 10 * 1000,
              name: '[hash:8].[ext]',
              // Tips: webpack v4.44.6版本问题, 使用esModule关闭es6模块化
              esModule: false,
              // 配置outputPath可以将图片资源单独打包到 build/img/ 目录中
              outputPath: 'img'
            }
          },
          {
            test: /\.(html)$/,
            loader: 'html-loader',
            options: {
              name: '[hash:8].[ext]',
            }
          },
          // 配置其他资源, 如字体
          {
            exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:8].[ext]',
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    // 2.将css提取到单独文件
    new MiniCssExtractPlugin({
      filename: 'css/app.css'
    }),
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    compress: true,
    // 开启HMR功能
    // 当修改了
    hot: true
  },
  devtool: 'source-map'
}
